<template>
    <el-dialog v-model="dialogTableVisible" :title="title" :close-on-press-escape="false" :close-on-click-modal="false"
        :show-close="false" :draggable="true" @before-close="() => false" append-to-body style="width: 50%;">
        <FormBase :mode="mode" @on-submit="onSubmit" @on-cancel="handleClose">
            <div class="editor-container">
                <el-form ref="roleForm" :model="dataModel" label-width="auto" :rules="rules" style="width:100%">
                    <el-form-item :label="t('角色编号')" prop="roleno">
                        <el-input v-model="dataModel.roleno" :disabled="mode === 'view'" />
                    </el-form-item>
                    <el-form-item :label="t('角色名称')" prop="rolename">
                        <el-input v-model="dataModel.rolename" :disabled="mode === 'view'" />
                    </el-form-item>
                </el-form>
            </div>
        </FormBase>
    </el-dialog>
</template>
<script lang="ts" setup>
import { computed, reactive, ref, watch } from 'vue';
import FormBase from '../layout/FormBase.vue';
import { t } from '@/common/locale';
import { FormRules } from 'element-plus';
import elHelper from '@/common/elHelper';
import { addRole, updateRole } from '@/api/authorization';
const props = defineProps({
    data: {
        type: Object,
        default: {}
    },
    mode: {
        type: String,
        validator: (val: string) => {
            return ['add', 'modify'].includes(val)
        },
        default: 'add'
    },
    show: {
        type: Boolean,
        default: false
    }
})
const emit = defineEmits(['onSubmited', 'update:show'])
const title = computed(() => {
    switch (props.mode) {
        case 'add':
            return t('新增')
        case 'modify':
            return t('修改')
        case 'view':
            return t('查看')
    }
})
const roleForm = ref()
const dialogTableVisible = ref(false)
const dataModel = reactive({
    roleno: '',
    rolename: '',
    roleId: ''
})
const rules = reactive<FormRules<any>>({
    roleno: [
        { required: true, message: t('请输入角色编号'), trigger: 'blur' }
    ],
    rolename: [
        { required: true, message: t('请输入角色名称'), trigger: 'blur' }
    ]

})

watch(() => props.show, async (val) => {
    dialogTableVisible.value = val
    if (val) {
        Object.assign(dataModel, props.data)
    } else {
        dataModel.rolename = ''
        dataModel.roleId = ''
        dataModel.roleno = ''
    }
})

const onSubmit = async () => {
    let valid = await roleForm.value.validate((valid, invalidFields) => {
        if (!valid) {
            elHelper.showErrorMsg('校验失败：请修改后再提交')
        }
        return valid
    })
    if (valid) {
        if (props.mode === 'add') {
            const re = await addRole(dataModel)
            if (re.isSuccess) {
                emit('onSubmited')
                elHelper.showSuccessMsg('操作成功')
                handleClose()
            } else {
                elHelper.showErrorMsg(re.msg)
            }
        } else {
            const re = await updateRole(dataModel)
            if (re.isSuccess) {
                emit('onSubmited')
                elHelper.showSuccessMsg('操作成功')
                handleClose()
            } else {
                elHelper.showErrorMsg(re.msg)
            }
        }
    }
}

const handleClose = () => {
    dialogTableVisible.value = false
    emit('update:show', false)
}
</script>
<style lang="scss" scoped>
.editor-container {
    width: 98%;
    display: flex;
    justify-content: center;
    justify-items: center;
}
</style>